<template>
    <van-popup  v-model="popupVisible" position="right" :overlay="isOverlay">
      <search-nav v-for="(list,index) in product" :key="index" :isFirst="index==0?true:false" :title="list.title" :id="list.id" :url="'/'"/>
      <search-nav v-for="(list,index) in navContent" :key="index+4" :isFirst="false" :title="getText(list.navName)" :id="-1" :url="list.url"/>
      <i18-n-button/>
      <div>
        <search-input/>
      </div>
    </van-popup>
</template>

<script>
  import searchNav from '@/components/mobile/search/searchNav'
  import searchInput from '@/components/mobile/search/searchInput'
  import i18NButton from '@/components/mobile/search/i18NButton'
  export default {
        name: "searchIndex",
    props:{
          product:{},
    },
      data(){
          return{
            isOverlay:false,
            popupHeight:0,
            navContent:[
              {
                navName:'mall',
                url:'/MallIndex',
                productClass:''
              },
              {
                navName: 'brand',
                url:'/brandIndex',
                productClass:'BrandStory'
              },
              {
                navName: 'companyProfile',
                url:'/CompanyProfileIndex',
                productClass:'CompanyProfile'
              }
            ]
          }
      },
      computed:{
        popupVisible:{
          get:function () {
            return this.$store.getters.getSearchPopup;
          },
          set(){}
        },
      },
      components:{
        searchNav:searchNav,
        searchInput:searchInput,
        i18NButton:i18NButton,
      },
      methods:{
        getText(text){
          let str = 'search.'+text;
          return this.$t(str);
        }
      },
      mounted(){
      }
    }
</script>

<style scoped>
.van-popup{
  width:100%;
  background: #ffffff;
  float:left;
  height:100%;
  margin-top: 45px;
  text-align: left;
  overflow-x: hidden;
  color:#000;
  border-top:1px solid #e8e8e8;
}
.van-nav-bar__left img{
  vertical-align: middle;
}
.van-nav-bar__right button{
  border:0;
  background:rgba(0,0,0,0);
}
.van-nav-bar__right img{
  vertical-align: middle;
}
</style>
